import {
  ChangeDetectionStrategy,
  Component,
  Input,
  OnChanges,
  OnDestroy,
  SimpleChanges,
  TemplateRef,
  ViewEncapsulation,
} from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { InputBoolean } from '../core/utils/convert';
import { LvListItemLayout } from '../core/types';

@Component({
  selector: 'lv-list, [lv-list]',
  templateUrl: './list.component.html',
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    class: 'lv-list',
    '[class.lv-list-split]': 'lvSplit',
    '[class.lv-list-vertical]': "lvItemLayout === 'vertical'",
    '[class.lv-list-hoverable]': 'lvHoverable',
  },
})
export class ListComponent implements OnChanges, OnDestroy {
  @Input() lvDataSource: any[];
  @Input() lvItemRender: TemplateRef<any>;
  @Input() @InputBoolean() lvSplit: boolean = true;
  @Input() @InputBoolean() lvLoading: boolean = false;
  @Input() @InputBoolean() lvHoverable: boolean = false;
  @Input() lvItemLayout: LvListItemLayout = 'horizontal';

  itemLayout$ = new BehaviorSubject<LvListItemLayout>(this.lvItemLayout);

  constructor() {}

  ngOnDestroy(): void {
    this.itemLayout$.unsubscribe();
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.lvItemLayout) {
      this.itemLayout$.next(this.lvItemLayout);
    }
  }
}
